<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>头像测试</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .test-section { margin: 20px 0; padding: 15px; border: 1px solid #ddd; border-radius: 5px; }
        button { padding: 10px 15px; margin: 5px; background: #007bff; color: white; border: none; border-radius: 3px; cursor: pointer; }
        button:hover { background: #0056b3; }
        .avatar-preview { width: 100px; height: 100px; border-radius: 50%; border: 2px solid #ddd; margin: 10px; }
        .error { color: red; }
        .success { color: green; }
        input[type="file"] { margin: 10px 0; }
    </style>
</head>
<body>
    <h1>头像功能测试</h1>
    
    <div class="test-section">
        <h2>头像上传测试</h2>
        <input type="file" id="avatarFile" accept="image/*">
        <button onclick="uploadAvatar()">上传头像</button>
        <div id="uploadResult"></div>
    </div>
    
    <div class="test-section">
        <h2>头像预览</h2>
        <img id="avatarPreview" class="avatar-preview" src="/static/default-avatar.svg" alt="头像预览">
        <div id="avatarInfo"></div>
    </div>
    
    <div class="test-section">
        <h2>用户信息测试</h2>
        <button onclick="getUserInfo()">获取用户信息</button>
        <div id="userResult"></div>
    </div>

    <script>
        async function uploadAvatar() {
            const fileInput = document.getElementById('avatarFile');
            const file = fileInput.files[0];
            
            if (!file) {
                alert('请选择图片文件');
                return;
            }
            
            try {
                const formData = new FormData();
                formData.append('avatar', file);
                
                const response = await fetch('/api/users/avatar', {
                    method: 'POST',
                    body: formData
                });
                
                const result = await response.json();
                
                if (result.success) {
                    document.getElementById('uploadResult').innerHTML = 
                        '<p class="success">上传成功！</p><pre>' + JSON.stringify(result, null, 2) + '</pre>';
                    
                    // 更新预览
                    const avatarUrl = result.data.avatarUrl;
                    document.getElementById('avatarPreview').src = avatarUrl;
                    document.getElementById('avatarInfo').innerHTML = 
                        '<p>头像URL: ' + avatarUrl + '</p>';
                } else {
                    document.getElementById('uploadResult').innerHTML = 
                        '<p class="error">上传失败: ' + result.message + '</p>';
                }
            } catch (error) {
                document.getElementById('uploadResult').innerHTML = 
                    '<p class="error">错误: ' + error.message + '</p>';
            }
        }

        async function getUserInfo() {
            try {
                const response = await fetch('/api/users/me', {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json',
                    }
                });
                
                const result = await response.json();
                document.getElementById('userResult').innerHTML = 
                    '<pre>' + JSON.stringify(result, null, 2) + '</pre>';
                
                if (result.success && result.data.avatar) {
                    document.getElementById('avatarPreview').src = result.data.avatar;
                    document.getElementById('avatarInfo').innerHTML = 
                        '<p>用户头像: ' + result.data.avatar + '</p>';
                }
            } catch (error) {
                document.getElementById('userResult').innerHTML = 
                    '<p class="error">错误: ' + error.message + '</p>';
            }
        }

        // 页面加载时获取用户信息
        window.onload = function() {
            getUserInfo();
        };
    </script>
</body>
</html> 